<template>
  <!-- 添加或修改产品对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false" custom-class="show-back-class">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">

      <el-form-item label="门类" prop="level0" >
        <el-select v-model="form.level0" placeholder="请选择分类级别" style="width: 100%" @change="changeLevelByType(0)">
          <el-option class="index-option" v-for="dict in $store.state.factorDict.productCategorizeDict0"
                     :key="dict.code" :label="dict.chineseName" :value="dict.code" />
        </el-select>
      </el-form-item>
      <el-form-item label="大类" prop="level1" >
        <el-select v-model="form.level1" placeholder="请选择分类级别" style="width: 100%"  @change="changeLevelByType(1)">
          <el-option class="index-option" v-for="dict in $store.state.factorDict.productCategorizeDict1" v-if="dict.parentCode==form.level0"
                     :key="dict.code" :label="dict.chineseName" :value="dict.code" />
        </el-select>
      </el-form-item>
      <el-form-item label="中类" prop="level2"  >
        <el-select v-model="form.level2" placeholder="请选择分类级别" style="width: 100%"  @change="changeLevelByType(2)">
          <el-option class="index-option" v-for="dict in $store.state.factorDict.productCategorizeDict2" v-if="dict.parentCode==form.level1"
                     :key="dict.code" :label="dict.chineseName" :value="dict.code" />
        </el-select>
      </el-form-item>
      <el-form-item label="小类" prop="level3"  >
        <el-select v-model="form.level3" placeholder="请选择分类级别" style="width: 100%"  @change="changeLevelByType(3)">
          <el-option class="index-option" v-for="dict in $store.state.factorDict.productCategorizeDict3" v-if="dict.parentCode==form.level2"
                     :key="dict.code" :label="dict.chineseName" :value="dict.code" />
        </el-select>
      </el-form-item>

      <el-form-item label="产品名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入产品名称" />
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-input v-model="form.orderNum" placeholder="请输入排序" @blur="verifyNumDefault(form,'orderNum',0,null)"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio v-for="dict in $store.state.factorDict.statusOptions"
                    :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listProductInfo, getProductInfo, delProductInfo, addProductInfo, updateProductInfo, exportProductInfo } from "@/api/factor/productInfo";

export default {
  name: "ProductInfo",
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
        level0: [{ required: true, message: "请选择门类", trigger: "change" }],
        level1: [{ required: true, message: "请选择大类", trigger: "change" }],
        level2: [{ required: true, message: "请选择中类", trigger: "change" }],
        level3: [{ required: true, message: "请选择小类", trigger: "change" }],
      }
    };
  },
  created() {
  },
  methods: {
    changeLevelByType(type){
      if(type===0){
        this.form.level1=null;
        this.form.level2=null;
        this.form.level3=null;
      }else if(type===1){
        this.form.level2=null;
        this.form.level3=null;
      }else if(type===2){
        this.form.level3=null;
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        level0: null,
        level1: null,
        level2: null,
        level3: null,
        name: null,
        status: 1,
        orderNum: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加产品";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      getProductInfo(row.id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改产品";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateProductInfo(this.form).then(response => {
              if (response.code === '200') {
                this.msgSuccess("修改成功");
                this.open = false;
                this.$emit("getList");
              }
            });
          } else {
            addProductInfo(this.form).then(response => {
              if (response.code === '200') {
                this.msgSuccess("新增成功");
                this.open = false;
                this.$emit("getList");
              }
            });
          }
        }
      });
    },

  }
};
</script>
